<template>
    <div class="home-box">
        <div class="my-box" @scroll="scrollEvt">
            <!-- 头部 -->
            <div class="header">
                <div class="video" @click="router.push('/video')"><img src="../../images/video.png" alt=""></div>
                <div class="search" @click="router.push('/search')">
                    <van-button round icon="search">
                        <van-swipe vertical class="notice-swipe" :autoplay="4000" :touchable="false"
                            :show-indicators="false">
                            <van-swipe-item style="width: 150px">网红疯狂小杨哥退网</van-swipe-item>


                        </van-swipe>
                    </van-button>
                </div>
                <div class="live"><img src="../../images/live.png" alt=""></div>
                <van-icon name="fire-o" />
                <van-icon name="chat-o" />

            </div>

            <!-- 内容 -->
            <div class="main">
                <!-- 类别跳转 -->
                <div class="line">
                    <span>直播</span>
                    <span class="active">推荐</span>
                    <span>热门</span>
                    <span>影视</span>
                    <span>直播</span>
                    <span>动画</span>
                    <span>新征程</span>
                    <!-- <van-grid :border="false" direction="horizontal"  :column-num="6" >
                    <van-grid-item text="直播" />
                    <van-grid-item text="推荐" />
                    <van-grid-item text="热门" />
                    <van-grid-item text="影视" />
                    <van-grid-item text="动画" />
                    <van-grid-item text="新征程" />
                </van-grid> -->
                    <div class="ty" @click="router.push('/types')">
                        <van-icon name="list-switch" />
                    </div>
                </div>
                <!-- 轮播 -->
                <div class="Carousel">
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                        <van-swipe-item><img src="../../images/lunbo1.png" alt=""></van-swipe-item>
                        <van-swipe-item><img src="../../images/lunbo2.png" alt=""></van-swipe-item>
                        <van-swipe-item><img src="../../images/lunbo3.png" alt=""></van-swipe-item>

                    </van-swipe>
                </div>
                <!-- 展示 -->
                <div class="shows">
                    <div class="item" v-for="it in recommand" :key="it.id">
                        <img :src="baseURL + it.path" alt="">
                        <div class="title">{{ it.title }}</div>
                        <div class="tags">
                            <span class="tag" v-for="tag in it.tag" :key="tag">
                                <span>{{ tag }}</span>
                            </span>
                        </div>
                        <div class="price"><span>¥ {{ it.price }}</span><span> <van-icon name="cart-o"
                                    @click="addCartList(it)" /></span></div>
                        <div class="cart-icon"> </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="footer">
            <div class="my-tabs">
                <div :class="['item', it.act && 'act', it.icon]" v-for="it in tabs" :key="it.txt" >
                    {{ it.txt }}
                </div>
            </div>
        </div> -->
        <!-- <div class="loading-box">
          <div v-if="loading">加载中...</div>
          <div v-else-if="hasMore">
            <van-loading size="18px">加载中...</van-loading>
          </div>
          <div v-else>没有更多数据</div>
        </div> -->
    </div>
</template>
<script  lang="ts" setup>
/** 全局变量 */
const baseURL = window.baseURL;
import { showToast} from "vant";
import { Ref, ref } from "vue";
import router from "../../router";
import { cartAddApi, homeRecommendApi } from '../../apis/homeApi';
// import Login from "../login/login.vue";
// import { REMEMBER_PHONE } from "../../config/common.cfg";
const recommand: Ref<Array<any>> = ref([
    // {
    //     "img": "。。。",
    //     "title": "MEDICOS 超像可动 JOJO的奇妙冒险 里苏特·涅罗 可动手办",
    //     "tag": [],
    //     "price": "499",
    //     "path": "/home-images/1556d19eff1dad63c9896a85b5787e30434a24d9.png@300w_300h.webp",
    //     "id": "home-images-0"
    // },
])
const page: Ref<number> = ref(1)
getList();
async function getList() {
    let _res = await homeRecommendApi(page.value, 200)
    if (_res.code === 200) {
        hasMore.value = _res.data.total > page.value * 6;
        recommand.value = [...recommand.value, ..._res.data.rows];
    }

    loading.value = false
}

/** 滚动事件 -- 是否到触发点100px -- hasBottom、是否处于加载中 -- loading、是否有更多数据 -- hasMore */
const loading: Ref<boolean> = ref(true)
const hasMore: Ref<boolean> = ref(true)
function scrollEvt(evt: Event) {
    let _tar: HTMLDivElement = evt.target as HTMLDivElement;
    const hasBotton: boolean = _tar.scrollHeight - _tar.clientHeight - _tar.scrollTop <= 100;
    if (hasBotton && !loading.value && hasMore.value) {
        loading.value = true;
        page.value += 1;
        getList();
    }
}
// 添加购物车l
// const 
async function addCartList(it: any) {
    console.log(it);
   const userId = localStorage.getItem('userid')
   if (userId == null){
  
        router.push('/login')
       return
   }
   console.log(userId)
    let _res = await cartAddApi({
        userId: userId,
        price: it.price,
        id: it.id,
        time: Date.now(),
        count: 1,
        name: it.title,
        detailaddress: '--',
        bgUrl: it.path,
    })
    if (_res.code === 200) {
        
showToast('加入购物车成功');
        console.log(_res)
    } else {
        console.log(_res);

    }
}

</script>
<style lang="less" scoped>
@import "../../style/common.less";

.home-box {
    z-index: 999;
    height: 100%;
    position: relative;

    >.my-box {
        height: calc(100% - 50px);
        display: block;
        position: relative;
        overflow-x: hidden;
        // height: 100%;
        width: 100%;
        // height: 100%;
        // background-color: red;

        >.header {
            height: 70px;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 20px 12px;
            width: 100%;
            @hv: 35px;

            >.video {
                height: @hv;
                width: @hv;

                >img {
                    width: 100%;
                    height: 100%;
                }
            }

            >.search {
                // background-color: greenyellow;
                overflow: hidden;

                >.notice-swipe {
                    height: 30px;
                    line-height: 30px;
                }

            }

        }

        >.main {
            @hl: 40px;
            line-height: @hl;

            >.line {
                font-size: 16px;
                display: flex;
                position: relative;
                background-color: #fff;
                height: 40px;
                line-height: 40px;
                justify-content: space-between;
                justify-items: center;
                padding-right: 24px;

                >span {
                    display: inline-block;
                }

                >.ty {
                    position: absolute;
                    right: 1px;
                    top: 1px;

                }
            }

            >.Carousel {
                >.my-swipe .van-swipe-item {
                    color: #fff;
                    font-size: 20px;
                    line-height: 150px;
                    text-align: center;
                    background-color: white;
                    height: 220px;

                    >img {
                        width: 100%;
                        height: 100%;
                    }

                }
            }

            // 展示
            >.shows {
                display: flex;
                background-color: @g03;
                flex-wrap: wrap;
                padding-left: 10px;

                @w: 12px;

                >.item {
                    flex: 0 0 calc(50% - @w);
                    position: relative;
                    border-radius: 8px;
                    background-color: @g01;
                    margin-right: @w;
                    box-shadow: 0 0 12px rgba(0, 0, 0, .2);
                    margin-bottom: @w;
                    overflow: hidden;

                    >img {
                        display: block;
                        width: 100%;
                    }

                    >.title {
                        height: 40px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: normal;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        font-size: .7rem;
                        color: @b5;
                        line-height: 20px;
                        padding: 4px 10px;
                        display: -webkit-box;
                    }

                    >.tags {
                        height: 24px;
                        overflow: hidden;
                        padding: 4px 10px;

                        >.tag {
                            display: inline-block;
                            vertical-align: super;
                            border: solid 1px @b8;
                            color: @b8;
                            font-size: .6rem;
                            height: 16px;
                            line-height: 26px;
                            border-radius: 4px;
                            margin-right: 8px;

                            span {
                                display: inline-block;
                                transform: scale(0.7) translateY(-9px);
                            }
                        }
                    }

                    >.price {
                        display: flex;
                        justify-content: space-between;
                        margin: 10px;
                        font-size: .8rem;
                        color: @b8;

                        span {
                            font-size: 1.1rem;
                        }
                    }
                }
            }
        }

    }

    >.footer {
        width: 100%;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;

        .my-tabs {
            display: flex;
            height: 50px;
            background-color: @g01;
            overflow: hidden;
            font-size: .65rem;

            >.item {
                flex: 1;

                &::before {
                    content: '';
                    display: block;
                    height: 30px;
                    // background-size: 24px;
                    background-repeat: no-repeat;
                    background-position: center;


                }

                text-align: center;

                color: @g06;

                &.home::before {
                    .iconfont();
                    content: "\e61d";

                    // background-image: url(../../images/shouye-zhihui.png);
                }

                &.trends::before {
                    .iconfont();
                    content: "\e672";

                    .icon {
                        font-size: 20px;
                    }

                    // background-image: url(../../images/shouye-zhihui.png);
                }

                &.cart::before {
                    .iconfont();
                    content: "\e70c";
                    // background-image: url(../../images/shouye-zhihui.png);
                }

                &.double::before {
                    .iconfont();
                    content: "\e899";
                    // background-image: url(../../images/shouye-zhihui.png);
                }

                &.me::before {
                    .iconfont();
                    content: "\e635";
                    // background-image: url(../../images/shouye-zhihui.png);
                }

                &.act {
                    color: @b3;

                    &.home::before {
                        color: @b3;
                        // background-image: url(../../images/shouye-zhihui.png);
                    }

                    &.trends::before {
                        color: @g03;
                        // background-image: url(../../images/shouye-zhihui.png);
                    }

                    &.add::before {
                        color: @b3;
                        // background-image: url(../../images/shouye-zhihui.png);
                    }

                    &.double::before {
                        color: @b3;
                        // background-image: url(../../images/shouye-zhihui.png);
                    }

                    &.me::before {
                        color: @b3;
                        // background-image: url(../../images/shouye-zhihui.png);
                    }
                }
            }
        }
    }

}

::v-deep .van-grid-item__content--horizontal .van-grid-item {
    background-color: red;
}

::v-deep .van-grid-item__content--horizontal .van-grid-item__text {
    font-size: 16px;

}

.active {
    color: @b3;
    border-bottom: 2px solid @b5;

}
</style>